<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="../vue1026.js"></script>
        <style>
          #app{
            width: 800px;
    
            margin: 20px auto;
        }
          #tb{      
            width: 800px;
            border-collapse: collapse;
            margin: 20px auto;
          }
          #tb th{
            background-color: #0094ff;
            color:white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
          }
          #tb td{
          
            padding: 5px;
            text-align: center;
            border: 1px solid black;
         }
  </style>
    </head>
    <body>
    <div id="app">
    <input type="text" v-model="id">
    <input type="text" v-model="addName">
    <input type="text" v-model='cname'>
    <button @click="add">添加数据</button>
      <table id="tb">
        <thead>
        <tr>
          <th>编号</th>
          <th>品牌</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-if="list.length==0">
          <td colspan="4">无相关信息</td>
        </tr>
          <tr v-for="item in list|filterBy cname in 'name'">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime|destime}}</td>
            <td><a href="#" @click='delData(item.id)'>删除</a></td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
        Vue.filter('destime',function(input){
          var res='';
          var year=input.getFullYear();
          var month=input.getMonth();+1
          var date=input.getDate();
          var hour=input.getHours();
          var minite=input.getMinutes();
          var second=input.getSeconds();
          res=year+'-'+month+'-'+date+'-'+hour+'-'+minite+'-'+second;
          return res
        })
        new Vue({
          el:'#app',
          data:{
            list:[{id:1,name:'宝马',ctime:new Date()}],
            id:'',
            addName:'',
            cname:''
          },
          methods:{
            add:function(){
                var str={id:this.id,name:this.addName,ctime:new Date()};
                this.list.push(str);
                this.id="";
                this.addName=""
            },
            delData:function(id){
              if(!confirm('确定要删除此项吗')){
                return
              }
              var index=this.list.findIndex(function(item) {return item.id==id});
              this.list.splice(index,1)
            }
          }
        })
    </script>
    </body>
</html>